<template>
    <div>
        <h3>------------life生命周期---------------</h3>
        <p>{{ name }}</p>
        <button @click="change">修改用户姓名</button>
    </div>
</template>

<script>
import { ref, onBeforeMount, onMounted, onUpdated, onBeforeUpdate } from "vue"
export default {
    setup() {
        let name = ref('李四')
        console.log('setup')

        // 组件创建执行
        onBeforeMount(() => {
            console.log('挂载前')
        })
        onMounted(() => {
            console.log('挂载后')
        })

        // 修改数据执行
        onBeforeUpdate(() => {
            console.log('修改前')
        })
        onUpdated(() => {
            console.log('修改后')
        })

        function change() {
            name.value = "张三"
        }

        return {
            name,
            change
        }
    }
};
</script>

<style scoped></style>
